<template>
  <div class="login-wrapper">
    <el-card class="login-card" shadow="hover">
      <template #header>
        <div class="login-header">
          <el-icon class="header-icon"><Lock /></el-icon>
          <span class="header-title">{{ appTitle }}</span>
        </div>
      </template>

      <el-form :model="form" @keyup.enter="onSubmit" label-width="60px" class="login-form">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" type="password" placeholder="请输入密码" show-password />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="loading" @click="onSubmit" class="login-btn">
            登录
          </el-button>
        </el-form-item>
      </el-form>

      <div  class="login-hint">默认账号：os.wuhao / 123456</div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useUserStore } from "@/store/user";
import { Lock } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";

const router = useRouter();
const route = useRoute();
const store = useUserStore();
const form = reactive({ username: "os.wuhao", password: "123456" });
const loading = ref(false);
const appTitle = import.meta.env.VITE_APP_TITLE || "管理系统";

async function onSubmit() {
  if (loading.value) return;
  loading.value = true;
  try {
    await store.login(form.username, form.password);
    const redirect = (route.query.redirect as string) || "/";
    router.replace(redirect);
  } catch (e) {
    ElMessage.error("登录失败");
  } finally {
    loading.value = false;
  }
}
</script>

<style scoped>
.login-wrapper {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /*background: url('@/assets/imgs/bgc.webp') no-repeat center center fixed;*/
  background-color: #fff;
  /*background-size: cover;*/
}

.login-card {
  width: 380px;
  border-radius: 16px;
  padding: 24px 20px;
  /* 更透明的半透明背景 + 模糊玻璃效果 */
  background-color: rgba(255, 255, 255, 0.25); /* 透明度调低 */
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.login-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12); /* hover 阴影略轻 */
}

.login-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: bold;
  justify-content: center;
}

.header-icon {
  color: var(--el-color-primary);
  font-size: 24px;
}

.header-title {
  background: linear-gradient(90deg, var(--el-color-primary), #67c23a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.login-form {
  margin-top: 20px;
}

.login-btn {
  width: 100%;
  background: linear-gradient(90deg, var(--el-color-primary), #67c23a);
  border: none;
  font-weight: 600;
  transition: all 0.3s;
}

.login-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.login-hint {
  margin-top: 12px;
  font-size: 12px;
  color: #909399;
  text-align: center;
}
</style>